<template>
    <view class="pg">
        <wd-form ref="form" :model="model">
            <wd-cell-group border>
                <wd-input
                    size="large"
                    label="名称"
                    label-width="100px"
                    prop="name"
                    clearable
                    v-model="model.name"
                    placeholder="图片名称"
                    :rules="[{ required: true, message: '请填写素材名称' }]"
                />
                <wd-upload :limit="1" v-model:file-list="model.fileList" :upload-method="upload" :action="action" custom-class="ml-25"></wd-upload>
                <wd-button size="large" type="primary" custom-class="w-700 m-10-0-10-25" @click="handleSubmit">提交</wd-button>
            </wd-cell-group>
        </wd-form>
    </view>
</template>

<script setup>
    import { reactive, ref } from 'vue';
    import { api_upload } from '@/api/upload.js';
    import { api_material_save } from '@/api/material.js';
    const form = ref(null); //表单

    // 模型数据
    const model = reactive({
        name: '',
        fileList: [],
        fileUrl: ''
    });

    // 自定义上传方法
    const upload = async (file, formData, options) => {
        try {
            let res = await api_upload(file);
            // 根据实际响应数据判断是否上传成功
            if (res.code == 200) {
                options.onSuccess(res.data, file, formData);
                model.fileUrl = res.data.url;
            } else {
                throw new Error('Upload failed');
            }
        } catch (error) {
            // 设置上传失败回调
            options.onError(error, file, formData);
        }
    };

    // 提交表单
    const handleSubmit = async () => {
        // 执行表单验证
        try {
            let { valid, errors } = await form.value.validate();

            // 表单验证通过
            if (valid) {
                uni.showModal({
                    title: '是否提交',
                    success: async (res) => {
                        if (res.confirm) {
                            try {
                                await api_material_save({
                                    type: 1,
                                    name: model.name,
                                    filePath: model.fileUrl
                                });
                                uni.showToast({
                                    title: '上传成功',
                                    success: () => {
                                        uni.navigateBack();
                                    }
                                });
                            } catch (error) {
                                uni.showToast({
                                    title: error.msg,
                                    icon: 'none'
                                });
                            }
                        }
                    }
                });
            } else {
                console.log('校验失败', errors);
            }
        } catch (error) {
            // 表单验证失败或发生其他错误
            console.error('错误', error);
        }
    };
</script>

<style lang="scss" scoped></style>
